<template>
  <div class="register-container">
    <el-card class="register-body">
      <div class="register-tab">
        <el-tabs v-model="activeTab" :stretch="true">
          <el-tab-pane label="账号注册" name="accountRegister"></el-tab-pane>
        </el-tabs>
      </div>
      <el-form ref="registerFrom" :model="registerFrom" :rules="accountRules" style="margin-top: 15px">
        <el-form-item prop="username">
          <el-input
            class="register-input"
            type="text"
            v-model="registerFrom.username"
            auto-complete="off"
            placeholder="账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            show-password
            class="register-input"
            type="password"
            v-model="registerFrom.password"
            auto-complete="off"
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="towPassword">
          <el-input
            show-password
            class="register-input"
            type="password"
            v-model="registerFrom.towPassword"
            auto-complete="off"
            placeholder="确认密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="registerFrom.code"
            auto-complete="off"
            placeholder="验证码"
            class="code"
          ></el-input>
          <div class="register-code">
            <img :src="codeUrl" @click="getCode" class="register-code-img">
          </div>
        </el-form-item>
      </el-form>
      <el-button class="register-button"
                 @click.native.prevent="handleRegister"
      >
        注册
      </el-button>
    </el-card>
    <div class="not-account">
      <span @click.capture="registered">使用已有账号登录</span>
    </div>
  </div>
</template>

<script>
import { getCodeImg, register } from '@/api/login'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Register',
  data () {
    return {
      // 默认账号密码登录
      activeTab: 'accountRegister',
      // 账号登录表单数据
      registerFrom: {
        username: '',
        password: '',
        towPassword: '',
        code: '',
      },
      // codeUrl
      codeUrl: '',
      // 账号登录表单数据校验
      accountRules: {
        username: [{
          required: true,
          trigger: 'blur',
          message: '请输入您的账号'
        }],
        password: [{
          required: true,
          trigger: 'blur',
          message: '请输入您的密码'
        }],
        towPassword: [{
          required: true,
          trigger: 'blur',
          message: '请输入您的确认密码'
        }],
        code: [{
          required: true,
          trigger: 'change',
          message: '请输入验证码'
        }]
      },
    }
  },
  created () {
    // 获取验证码
    this.getCode()
  },
  methods: {
    // 注册按钮
    handleRegister () {
      // 账号注册
      this.$refs.registerFrom.validate(valid => {
        if (valid) {
          register(this.registerFrom).then(res => {
            if (res.code === 200) {
              this.$router.push({name: 'Login'})
              this.$message.success(res.msg)
            }else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    // 注册
    registered () {
      // 跳转到登录页
      this.$router.push({ name: 'Login' })
    },
    // 获取验证码
    getCode () {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled
        if (this.captchaEnabled) {
          this.codeUrl = 'data:image/gif;base64,' + res.img
          this.registerFrom.uuid = res.uuid
        }
      })
    },
  },
}
</script>

<style scoped>

.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 98dvh;
  background-image: url('@/assets/image/login.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.register-body {
  border-radius: 12px;
  height: 430px;
  width: 370px;
  position: absolute;
  left: 200px;
}

.register-tab {
  margin: 0 auto;
  width: 266px;
  text-align: center;
}

.register-tab >>> .el-tabs__item {
  font-size: 16px; /* 修改为你想要的字体大小 */
}

.register-input >>> .el-input__inner {
  width: 270px;
  outline: none;
  border-color: transparent;
  box-shadow: none;
  margin-left: 30px;
  background: #ecf3f9;
}

.forgot-password {
  cursor: pointer;
  float: right;
  font-size: 12px;
  color: #409eff;
  margin-right: 30px;
}

.register-button {
  color: #fff;
  background-color: #409eff;
  width: 270px;
  margin-left: 30px;
}

.not-account {
  color: #c4cecf;
  font-size: 13px;
  line-height: 45px;
  height: 45px;
  position: absolute;
  top: 590px;
  left: 200px;
  width: 371px;
  text-align: center;
}

.not-account > span {
  float: right;
  margin-right: 50px;
  cursor: pointer;
  color: #8dc6ff;
}

.register-code {
  width: 33%;
  height: 38px;
  margin-right: 30px;
  float: right;
}

.register-code-img {
  height: 38px;
  margin-left: 8px;
  margin-top: 2px;
}

.code {
  float: left;
  margin-left: 5px;
  width: 160px
}

.code >>> .el-input__inner {
  width: 100%;
  outline: none;
  border-color: transparent;
  box-shadow: none;
  background: #ecf3f9;
  margin-left: 25px;
}

.captcha >>> .el-input__inner {
  width: 100px;
}

.send-code {
  position: absolute;
  width: 160px;
  left: 142px;
  top: 2px;
}

</style>
